<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- Basic Page Needs
    ================================================== -->
		<meta charset="utf-8">
		<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>主页</title>
		<meta name="description" content="KIDS is a clean, modern, and fully responsive Html Template. Take your Startup business website to the next level. It is designed for kindergarten, childcare, homeschooling, school, learning, playground businesses or any type of person or business who wants to showcase their work, services and professional way.">
		<meta name="keywords" content="business, care, childcare, children, clean, corporate, happykids, homeschool, kids, kindergarten, playground, responsive, school, learning">
		<meta name="author" content="rometheme.net">

		<!-- ==============================================
	Favicons
	=============================================== -->
		<link rel="shortcut icon" href="static/images/favicon.ico">
		<link rel="apple-touch-icon" href="static/images/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="static/images/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="static/images/apple-touch-icon-114x114.png">

		<!-- ==============================================
	CSS VENDOR
	=============================================== -->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" type="text/css" href="static/css/vendor/owl.carousel.min.css">
		<link rel="stylesheet" type="text/css" href="static/css/vendor/owl.theme.default.min.css">
		<link rel="stylesheet" type="text/css" href="static/css/vendor/magnific-popup.css">
		<link rel="stylesheet" type="text/css" href="static/css/vendor/animate.min.css">

		<!-- ==============================================
	Custom Stylesheet
	=============================================== -->
		<link rel="stylesheet" type="text/css" href="static/css/style.css" />

		<script src="static/js/vendor/modernizr.min.js"></script>

	</head>

	<body>

		<!-- LOAD PAGE -->
		<div class="animationload">
			<div class="loader"></div>
		</div>

		<!-- BACK TO TOP SECTION -->
		<a href="#0" class="cd-top cd-is-visible cd-fade-out">Top</a>

		<!-- HEADER -->
		<div class="header header-1">

			<!-- NAVBAR SECTION -->
			<div class="navbar-main">
				<div class="container">
					<nav id="navbar-example" class="navbar navbar-expand-lg">
						<a class="navbar-brand" href="index.jsp">
							<img src="static/images/logos.png" alt="">
						</a>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			            <span class="navbar-toggler-icon"></span>
			        </button>
						<div class="collapse navbar-collapse" id="navbarNavDropdown">
							<ul class="navbar-nav ml-auto">
								<li class="nav-item active">
									<a class="nav-link" href="index.jsp">主页</a>
								</li>
								<li class="nav-item">
									<!-- <a class="nav-link" href="classes.jsp">树洞</a> -->
									<a class="nav-link" href="selectAllPublishs">树洞</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="selectAllArts">解忧师</a>
								</li>
								<li class="nav-item dropdown dmenu">
									<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										获取更多
									</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="faq.jsp">烦恼解答</a>
										<a class="dropdown-item" href="love.jsp">情感烦恼</a>
										<a class="dropdown-item" href="family.jsp">家庭关系</a>
										<a class="dropdown-item" href="relationship.jsp">人际关系烦恼</a>
										<a class="dropdown-item" href="occupation.jsp">职业规划烦恼</a>
										<a class="dropdown-item" href="school.jsp">学校生活烦恼</a>
										<a class="dropdown-item" href="pressure.jsp">学业竞争压力</a>
									</div>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="contact.jsp">发帖 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="person.jsp">个人信息</a>
								</li>
							</ul>
						</div>
					</nav>
					<!-- -->

				</div>
			</div>

		</div>

		<!-- BANNER -->
		<div id="oc-fullslider" class="banner">
			<div class="owl-carousel owl-theme full-screen">
				<div class="item">
					<img src="static/images/xx.jpg" alt="Slider">
					<div class="overlay-bg"></div>
					<div class="container d-flex align-items-center">
						<div class="wrap-caption">
							<h1 class="caption-heading">学校生活中的烦恼</h1>
							<a href="school.html" class="btn btn-secondary mt-3">阅读更多</a>
						</div>
					</div>
				</div>
				<div class="item">
					<img src="static/images/fn.jpg" alt="Slider">
					<div class="overlay-bg"></div>
					<div class="container d-flex align-items-center">
						<div class="wrap-caption">
							<h1 class="caption-heading">人际关系烦恼</h1>
							<a href="relationship.jsp" class="btn btn-secondary mt-3">阅读更多</a>
						</div>
					</div>
				</div>
				<div class="item">
					<img src="static/images/yiyu.jpg" alt="Slider">
					<div class="overlay-bg"></div>
					<div class="container d-flex align-items-center">
						<div class="wrap-caption">
							<h1 class="caption-heading">职业规划迷茫</h1>
							<a href="occupation.jsp" class="btn btn-secondary mt-3">阅读更多</a>
						</div>
					</div>
				</div>
			</div>
			<div class="custom-nav owl-nav"></div>
		</div>

		<!-- SHORTCUT -->
		<div class="section services">
			<div class="content-wrap pb-3">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 col-md-12">
							<div class="row col-0 overlap no-gutters">
								<div class="col-sm-12 col-md-4 col-lg-4">
									<!-- BOX 1 -->
									<div class="rs-feature-box-1 bg-primary">
										<i class="fa fa-clock-o"></i>
										<div class="body">
											<h4>拖延症</h4>
											<p>一项调查显示大约75%的大学生认为自己有时拖延，50%认为自己一直拖延。严重的拖延症会对个体的身心健康带来消极影响，如出现强烈的自责情绪、负罪感，不断的自我否定、贬低，并伴有焦虑症、抑郁症等心理疾病，一旦出现这种状态，需要引起重视。</p>
											<div class="spacer-10"></div>
											<a href="emotion.jsp" class="btn">了解更多</a>
										</div>
									</div>
								</div>
								<div class="col-sm-12 col-md-4 col-lg-4">
									<!-- BOX 2 -->
									<div class="rs-feature-box-1 bg-secondary">
										<i class="fa fa-home"></i>
										<div class="body">
											<h4>家庭关系</h4>
											<p>家庭中也不免会有冲突，并且关系越复杂，调适越困难。一项调查显示大约60%的大学生认为自己家庭不和谐。家庭关系是最难维持的，因为几乎要日日相见，难免会有舌头磕着牙齿的时候。然而家庭关系又是最好维持的，因为你们血脉相连、水乳交融，是世界上最亲近的人。</p>
											<div class="spacer-10"></div>
											<a href="family.jsp" class="btn">了解更多</a>
										</div>
									</div>
								</div>
								<div class="col-sm-12 col-md-4 col-lg-4">
									<!-- BOX 3 -->
									<div class="rs-feature-box-1 bg-tertiary">
										<i class="fa fa-trophy"></i>
										<div class="body">
											<h4>学业竞争压力</h4>
											<p>面临强大的竞争压力，不少考生在考前出现了考试焦虑症。其表现为：上课心不在焉，十分焦急自己马上临考却仍然什么也记不住；烦躁不堪，见到任何事情都有发火的欲望；坐立不安，总觉得自己的每一个动作都是浪费时间；吃不好，睡不香，精神萎靡不振。</p>
											<div class="spacer-10"></div>
											<a href="pressure.jsp" class="btn">了解更多</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- WELCOME TO KIDS -->
		<div class="section">
			<div class="content-wrap">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 col-md-12 col-lg-6">
							<img src="static/images/la.jpg" alt="" class="img-fluid img-border mb-3">
						</div>
						<div class="col-sm-12 col-md-12 col-lg-6">
							<h2 class="section-heading">
							情感答疑
						</h2>
							<p>Teritatis et quasi architecto. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo invent. Sed ut perspiciatis unde omnis iste natus error sitdolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Praesent interdum est gravida vehicula est node maecenas loareet morbi a dosis luctus novum est praesent. Magna est consectetur interdum modest dictum.</p>
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo invent. </p>
							<div class="spacer-10"></div>
							<a href="love.jsp" class="btn btn-secondary">了解更多</a>
							<div class="spacer-30"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- OUR EVENTS -->
		<div class="section bgi-cover-center" data-background="images/event-bg.png">
			<div class="content-wrap">
				<div class="container">

					<div class="row">
						<div class="col-sm-12 col-md-12">
							<p class="supheading text-center">小伙伴的烦恼</p>
							<h2 class="section-heading text-center mb-5">
							别忘了帮助其他的小伙伴们解决烦恼
							</h2>
						</div>
					</div>

					<div class="row mt-4">
                       <c:forEach items="${publish}" var="p">
						<!-- <!-- Item 1 -->
						<div class="col-sm-12 col-md-12 col-lg-4 mb-5">
							<div class="rs-news-1">
								<div class="media-box">
									<img src="static/images/event-1.jpg" alt="" class="img-fluid">
								</div>
								<div class="body-box">
									<div class="title">${p.ptype }</div>
									<div class="meta-date">${p.ptime }</div>
									<p>${p.ptype }</p>
									<div class="text-center">
										<a href="comment.jsp" class="btn btn-primary">了解详情</a>
									</div>
								</div>
							</div>
						</div> 
					</c:forEach>

					

					</div>

				</div>
			</div>
		</div>

		<!-- OUR GALLERY -->
		<div class="section">
			<div class="content-wrap">
				<div class="container">

					<div class="row">
						<div class="col-sm-12 col-md-12">
							<p class="supheading text-center">忧愁自画像</p>
							<h2 class="section-heading text-center mb-5">
							忧愁瞬间
						</h2>
						</div>
					</div>

					<div class="row popup-gallery gutter-5">
						<!-- Item 1 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-1.jpg" title="Gallery #1">
									<img src="static/images/g-1.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Item 2 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-2.jpg" title="Gallery #2">
									<img src="static/images/g-2.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Item 3 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-7.jpg" title="Gallery #3">
									<img src="static/images/g-7.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Item 4 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-4.jpg" title="Gallery #4">
									<img src="static/images/g-4.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Item 5 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-5.jpg" title="Gallery #5">
									<img src="static/images/g-5.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Item 6 -->
						<div class="col-xs-12 col-md-6 col-lg-4">
							<div class="box-gallery">
								<a href="static/images/g-6.jpg" title="Gallery #6">
									<img src="static/images/g-6.jpg" alt="" class="img-fluid">
									<div class="project-info">
										<div class="project-icon">
											<span class="fa fa-search"></span>
										</div>
									</div>
								</a>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>

		<!-- WHY CHOOSE US -->
		<div class="section bgi-repeat" data-background="static/images/school2.jpg">
			<div class="content-wrap pb-0">
				<div class="container">
					<div class="row align-items-end">
						<div class="col-sm-12 col-md-12 col-lg-7">
							<p class="supheading">为什么你的咨询师不可以和你做朋友?</p>
							<h2 class="section-heading">
							我们这样说
						</h2>
							<p class="text-white">在一年或者更长时间里，你和你的咨询师每周见一次。你倾诉过你最深切的担心和忧虑，你分享过你的成就和喜悦。她（或他，但是此处我仍会使用女性代词）一直支持你，鼓励你，倾听并减轻你的痛苦。你可能会在杂货店碰到她，也可能在孩子足球赛的观众席里，发现她离你只有几个座位远。 将这样一个人看作朋友是很自然的。可以理解你可能想让这段关系更像朋友些：和她一起喝杯咖啡或者吃顿午饭，邀请她参加家庭婚礼，至少知道更多有关她生活的信息。 但是为什么你不能将你和咨询师的关系转化为友谊呢？事实上，有一些很好的理由可以解释，为什么你的咨询师不能成为你的朋友，但仍可以做你的咨询师。咨询关系有意使自己不同于其他关系。这种重要的区别在于专业边界的存在，而且应该持续存在。

							</p>
							<p class="p-check text-white">咨询的边界（boundary）就像土地的边界一样。这是一条人们都认可和尊敬的界线。这条界线告诉我们，咨询关系从哪里开始，在哪里结束。它把咨询师和你生活中的其他人区分开来。</p>
							<p class="p-check text-white">咨询过程中发生的一切是为了来访者的福祉，而不是为了咨询师。每一个讨论话题，每一次互动，都尽可能是经过深思熟虑的，是为了来访者实现他们的治疗目标。</p>
							<p class="p-check text-white">咨询师在决定要跨越边界前要考虑的重要因素是，咨访双方都认为，这样做对来访者有明显的好处。跨越边界的意义，需要在咨询中仔细地讨论。</p>
							<div class="spacer-content"></div>
						</div>
						<div class="col-sm-12 col-md-12 col-lg-5">
							<img src="static/images/teacher_promo.png" alt="" class="img-fluid">
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- OUR TESTIMONIALS -->
		<div class="section">
			<div class="content-wrap">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 col-md-12">
							<p class="supheading text-center">我们帮助过的人</p>
							<h2 class="section-heading text-center mb-5">
							解决了烦恼的人怎么说
						</h2>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 col-md-10 offset-md-1">
							<div class="text-center text-secondary mb-3"><i class="fa fa-quote-right fa-3x"></i></div>
							<div id="testimonial" class="owl-carousel owl-theme">
								<div class="item">
									<div class="rs-box-testimony">
										<div class="quote-box">
											<blockquote>
												感谢老师的耐心讲解和倾听，虽然感觉效果没有预期的那么好，但是依然要感谢老师给我的鼓励和认可。这是我第一次在生活中，得到他人的认可和赞美。
											</blockquote>
											<div class="media">
												<img src="static/images/u-3.jpg" alt="" class="rounded-circle">
											</div>
										</div>
									</div>
								</div>
								<div class="item">
									<div class="rs-box-testimony">
										<div class="quote-box">
											<blockquote>
												很庆幸吧，这样一个温柔的姐姐和我交流。如果不是的话，我可能也不会这么快的，调整好自己。我调整自己比作化学反应的话，姐姐就是催化剂啦，正催化剂，很感谢啦。
											</blockquote>
											<div class="media">
												<img src="static/images/u-2.jpg" alt="" class="rounded-circle">
											</div>

										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!-- CTA -->
		<div class="section bg-tertiary">
			<div class="content-wrap py-5">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-sm-12 col-md-12">
							<div class="cta-1">
								<div class="body-text mb-3">
									<h3 class="my-1 text-secondary">马上解决解决你的烦恼!</h3>
									<p class="uk18 mb-0 text-white">有烦恼就上解忧杂货铺!</p>
								</div>
								<div class="body-action">
									<a href="contact.jsp" class="btn btn-primary mt-3">发帖求助</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- JS VENDOR -->
		<script src="static/js/vendor/jquery.min.js"></script>
		<script src="static/js/vendor/bootstrap.min.js"></script>
		<script src="static/js/vendor/owl.carousel.js"></script>
		<script src="static/js/vendor/jquery.magnific-popup.min.js"></script>

		<!-- SENDMAIL -->
		<script src="static/js/vendor/validator.min.js"></script>
		<script src="static/js/vendor/form-scripts.js"></script>

		<script src="static/js/script.js"></script>

	</body>

</html>